

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手交易系统-主页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- <script>
        $(document).ready(function() {
            // 获取产品数据
            $.getJSON('/index', function(data) {
                // 遍历数据中的每个产品
                $.each(data, function(index, commodity) {
                    // 构建每个产品的HTML
                    var commodityHTML = `
                        <div class="commodity">
                            <img src="${commodity.image}" alt="${commodity.name}">
                            <h2>${commodity.name}</h2>
                            <p>价格: $${commodity.price}</p>
                            <p>描述: ${commodity.description}</p>
                            <button class="buy-btn">购买</button>
                        </div>
                    `;
                    // 将产品HTML追加到 #commodities 区域
                    $('#commodities').append(commodityHTML);
                });
            });
        });
    </script> -->
</head>
<body>
    {%include 'nav.html' %}
    <div class="container">
        <!-- <h2>主页-浏览商品</h2> -->
        <!-- <section id="filter">
            <input type="text" placeholder="搜索商品">
            <select name="category">
                <option value="all">所有类别</option>
                <option value="books">图书</option>
                <option value="electronics">电子产品</option>
                <option value="clothes">服装</option>
            </select>
        </section> -->
        <form data-sg-type="form" target="_top" action="../templates/index.html" name="search" id="J_TSearchForm" class="search-panel-focused">
            <i class="search-split"></i>
            <div class="search-button"><button class="btn-search tb-bg" type="submit"
                      data-spm-click="gostr=/tbindex;locaid=d13" data-spm="d13">搜索</button></div>
            <div data-sg-type="placeholder"></div>
            <div data-sg-type="combobox" class="search-suggest-combobox">
              <input id="q" name="q" aria-label="请输入搜索文字" accesskey="s" autofocus="true" autocomplete="off" aria-haspopup="true"
                aria-combobox="list" role="combobox" x-webkit-grammar="builtin:translate" />
            </div>
            <input type="hidden" name="commend" value="all" />
            <input type="hidden" name="ssid" value="s5-e" autocomplete="off" />
            <input type="hidden" name="search_type" value="item" autocomplete="off" />
            <input type="hidden" name="sourceId" value="tb.index" />
            <input type="hidden" name="spm" value="" />
            <input type="hidden" name="ie" value="utf8" />
            <input type="hidden" name="initiative_id" value="tbindexz_20170306" />
            <!--[if lt IE 9]>
            <s class="search-fix search-fix-panellt"></s><s class="search-fix search-fix-panellb"></s>
            <![endif]-->
        </form>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>商品图片</th>
                    <th>商品ID</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品类别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="indexList">
                <!-- 商品数据将会在这里动态生成 -->
            </tbody>
        </table>
    </div>
</body>
<script>
     var uid = "{{ session.get('username') }}";
    //列展商品信息
    $(document).ready(function () {
    // 使用 jQuery 发送 GET 请求获取商品数据
        $.getJSON('/indexs', function (data) {
            // 遍历返回的数据，并动态生成表格行
            $.each(data, function (key, value) {
                var tr = $("<tr></tr>");
                $("<td></td>").text(value.Image).appendTo(tr);
                $("<td></td>").text(value.id).appendTo(tr);
                $("<td></td>").text(value.name).appendTo(tr);
                $("<td></td>").text(value.price).appendTo(tr);
                $("<td></td>").text(value.sort).appendTo(tr);

                // $("<td></td>").text(value.count).appendTo(tr);
                // $("<td></td>").text(value.sort).appendTo(tr);
                // $("<td></td>").text(value.uid).appendTo(tr);
                // $("<td></td>").text(value.modify).appendTo(tr);

                var td = $("<td></td>").appendTo(tr);
                $("<button></button>").text("详情").addClass("btn btn-primary btn-sm").click(function(){
                    // 编写修改商品的逻辑，例如弹出修改表单
                    // alert('修改商品: ' + value.id );
                    // 跳转到商品详情页面，传递商品ID作为参数
                    window.location.href = 'Product_Details.html?id=' + value.id;
                    
                }).appendTo(td);
                $("<button></button>").text("收藏").addClass("btn btn-danger btn-sm").click(function(){
                    // 编写下架商品的逻辑，例如确认框等
                    
                    // 跳转到商品详情页面，传递商品ID作为参数
                    window.location.href = 'product-details.html?id=' + value.id;
                    alert('收藏商品: ' + value.id );
                    
                }).appendTo(td);
                
                $("#indexList").append(tr);
            });
        });
    });
</script>
</html>




